<template>
  <div>
    <el-card>
      <div id="containerTransEvent"></div>
    </el-card>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { createRegion } from "@/tools/createRegion.js";//行政区边界绘制函数
export default {
  name: "transEvent",
  setup(context, props) {
    window._AMapSecurityConfig = {
      securityJsCode: "7a147469fc71afc2c2540196e2453b2b",
    };
    const map = shallowRef(null);
    return {
      map,
    };
  },
  methods: {
    initMap() {
      let instance = this;
      AMapLoader.load({
        key: "2b45c6a7655404e69a9b856504d8625c", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          this.map = new AMap.Map("containerTransEvent", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [117.301291, 31.844148], //初始化地图中心点位置
            mapStyle: "amap://styles/darkblue",
          });
          //   导入地图插件
          AMap.plugin(
            ["AMap.ToolBar", "AMap.Geolocation", "AMap.DistrictSearch"],
            function () {
              // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
              instance.map.addControl(new AMap.ToolBar());
              // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
              instance.map.addControl(new AMap.Geolocation());
            //  createRegion("合肥市",instance.map)//绘制行政区边界
            }
          );
          
          let trafficLayer = new AMap.TileLayer.Traffic({//交通流量数据图层
              autoRefresh: true,
              interval: 1000*10,

          });

          instance.map.addLayer(trafficLayer);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  activated() {
    // 页面活动时加载地图容器
    this.initMap();
  },
  deactivated() {
    //页面失去焦点后删除地图容器
    this.map.destroy();
  },
};
</script>

<style lang="less" scoped>
#containerTransEvent {
  width: calc(100vw - 200px);
  height: calc(100vh - 3rem);
  position: absolute;
  top: 3rem;
  left: 200px;
}
</style>
